<template>
  <el-menu
    id="el-menu-vertical-demo"
    :collapse="isCollapse"
    :unique-opened="isopened"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    collapse-transition
    default-active="homepage"
  >
    <!-- 头部 标题 -->
    <template class="title" v-if="!isCollapse">
      <div class="title_text">
        <h3>{{ title }}</h3>
      </div>
    </template>
    <!-- 头部 图标 -->
    <template v-else>
      <div class="title_text">
        <i class="el-icon-platform-eleme"></i>
      </div>
    </template>
    <!-- 一级标题选项卡 -->
    <el-menu-item
      :index="item.path"
      v-for="item in noChildren"
      :key="item.path"
      @click="clcikMenu(item)"
    >
      <i :class="'el-icon-' + item.meta.icon"></i>
      <span slot="title">{{ item.meta.label }}</span>
    </el-menu-item>

    <!-- 二级导航 title -->
    <el-submenu :index="item.path" v-for="item in hasChildren" :key="item.path">
      <template slot="title">
        <i :class="'el-icon-' + item.meta.icon"></i>
        <span slot="title">{{ item.meta.label }}</span>
      </template>
      <el-menu-item-group>
        <!-- 二级选项卡 title -->
        <el-menu-item
          :index="subItem.path"
          v-for="(subItem, subIndex) in item.children"
          :key="subIndex"
          @click="clcikMenu(subItem)"
        >
          <i :class="'el-icon-' + subItem.meta.icon"></i>
          <span slot="title">{{ subItem.meta.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [],
      isopened: true,
      title: "代付宝后台管理系统",
    };
  },

  mounted() {
    // 获取 vuex 中的数据, 通过 map 方法修改,取得其中的字段 并赋值给当前组件的 menu
    this.menu = this.$store.state.menuData.anRouter.map((item) => {
      return (item = item.children);
    })[0];

    // console.log(this.$router)
    // console.log("isCollapse", this.$store.state.headerData.isCollapse);
    // console.log(this.menu);
  },

  methods: {
/*     handleOpen(key, keyPath) {
      // 展开导航栏
      console.log(key, keyPath);
    }, */
/*     handleClose(key, keyPath) {
      // 关闭导航栏
      console.log(key, keyPath);
    }, */

    clcikMenu(item) {
      // console.log("clickMenu", item);
      this.$store.commit("crumbsData/selectMenu", item);
    },
/* 
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }, */
  },

  computed: {
    // 因为计算属性计算出的结果是属于数据类型
    noChildren() {
      // 返回没有子类的路由配置表 -- 以及路由
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {
      // 返回有子类的路由配置表 -- 多级路由
      return this.menu.filter((item) => item.children);
    },

    // 侧边栏是否折叠
    isCollapse() {
      return this.$store.state.headerData.isCollapse;
    },
  },
};
</script>

<style lang="scss">
.el-menu {
  border-right: none;

  .title_text {
    height: 60px;
    padding: 10px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #ffffff;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: auto;
    height: 100%;
  }
}
</style>
